<!DOCTYPE html>
<extend name="Base/base" />
<block name='head'>  
    <meta charset="utf-8">
    <link href="/Public/Index/css/workflow.css" rel="stylesheet" /> 
    <!-- 点击单独显示图片，手势放大、缩小css、js-->
    <link href="/Public/static/photoSwipe/photoswipe.css" rel="stylesheet" /> 
    <link href="/Public/static/photoSwipe/default-skin/default-skin.css" rel="stylesheet" />
    <script src="/Public/static/photoSwipe/photoswipe.min.js"></script>
    <script src="/Public/static/photoSwipe/photoswipe-ui-default.js"></script>
</block>
<block name="content" > 
    <div class="bd">
        <div class="newscontent">
            <div class="trip_title">
                <h2>
                    <if condition="$new.type_id eq 1">
                        【公司新闻】
                        <else />
                        【行业新闻】
                    </if>
                    {$new.subject}
                </h2>
            </div>
            <div class="work_cells trip_next">
                <p class="top" style="text-align: center">
                    点击量：{$new.click_count}
                    <span style="float:right">{$new.provider|getChineseName}
                        <font color="#bbb">&nbsp;&nbsp;{$new.news_time}</font></span>
                </p>
            </div>
            <!--            <if condition="uploads neq null">
                            <foreach name="uploads" item="img">
                                <div style="text-align: center;"><img src="{$img.url}" width="300px"></div>
                            </foreach>
                        </if>-->
            <foreach name="uploads" item="img" key="key">
                <div class="my-gallery" data-pswp-uid="1" style="text-align: center;">
                    <figure>
                        <a href="{$img.url}" data-size="420x350">
                            <img class="image" id="img{$key+1}" src="{$img.url}" width="300px">
                        </a>
                    </figure>
                </div>
            </foreach>
            <input type="hidden" id="ispc" value="{$ispc}">
            <div class='newCont' style="text-indent: 2em">
                {$new.content}
            </div>

            <div class="edit">{$new.provider|getChineseName} 最后编辑于：{$new.last_edit_time}</div>

            <if condition="$new.anonymity_yn neq 2">
                <table class="TableTop" align="center" width="100%">
                    <tbody>
                        <tr>
                            <td class="left"></td>
                            <td class="center" style="font-size:1.2em">评论</td>
                            <td class="right"></td>
                        </tr>
                    </tbody>
                </table>
                <table class="TableBlock" align="center">
                    <tbody>
                    <notempty name="comments">
                        <if condition="$new['anonymity_yn'] neq 2">
                            <foreach name="comments" item="comment">
                                <tr>
                                    <td class="TableContent">
                                        &nbsp;&nbsp;<span>{$comment.user_name}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;发表时间：{$comment.re_time}
                                    </td>
                                </tr>
                                <tr height="40">
                                    <td class="TableData">
                                        {$comment.content}
                                    </td>
                                </tr>
                                <tr>
                                    <td class="TableControl" align="right">

                                        <!--<a href="relay.php?COMMENT_ID=177&amp;NEWS_ID=9&amp;start=0&amp;MANAGE=" style="text-decoration:underline">回复本贴</a>&nbsp;&nbsp;&nbsp;-->
                                <if condition="$comment.is_del eq 1">
                                    <a href="#" class='pointer delComment' data-id="{$comment.comment_id}">删除</a>
                                </if>
                                </td>
                                </tr>
                            </foreach>
                        </if>
                        <else />
                        <tr height="40">
                            <td class="TableData">暂无评论</td>
                        </tr>
                    </notempty>
                    </tbody>
                </table>
                <table class="TableTop" align="center" width="100%">
                    <tbody>
                        <tr>
                            <td class="left"></td>
                            <td class="center" style="font-size:1.2em">发表评论</td>
                            <td class="right"></td>
                        </tr>
                    </tbody>
                </table>
                <form name='form1'>
                    <input type="hidden" name='news_id' value="{$new.news_id}">
                    <table class="TableBlock" align="center" width="100%">
                        <tbody>
                            <tr>
                                <td class="TableData">
                                    <textarea cols="36" name="content" rows="5" class="BigInput" wrap="on"></textarea>
                                </td>
                            </tr>
                            <tr class="TableControl" align="center">
                                <td colspan="2" nowrap="">
                                    <a class="pointer btn-submit ajax-post BigButton" data-verify="all" data-url="{:U('commentNews')}" data-form="" >发&nbsp;&nbsp;表</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <input type="hidden" id="delurl" value="{:U('News/delComment')}">
                </form>
            </if>
        </div>
    </div>
    <p class="bottom"></p>
    <div class="button">
        <a class="am-btn" onclick="history.go(-1)">返 回</a>
    </div>


    <!-- 点击单独显示图片，手势放大、缩小  开始 -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

        <!-- Background of PhotoSwipe. 
             It's a separate element as animating opacity is faster than rgba(). -->
        <div class="pswp__bg"></div>

        <!-- Slides wrapper with overflow:hidden. -->
        <div class="pswp__scroll-wrap">
            <!-- Container that holds slides. 
                PhotoSwipe keeps only 3 of them in the DOM to save memory.
                Don't modify these 3 pswp__item elements, data is added later on. -->
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>
            <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
            <div class="pswp__ui pswp__ui--hidden">
                <div class="pswp__top-bar">
                    <!--  Controls are self-explanatory. Order can be changed. -->
                    <div class="pswp__counter"></div>
                    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                    <button class="pswp__button pswp__button--share" title="Share"></button>
                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                    <!-- element will get class pswp__preloader--active when preloader is running -->
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip"></div> 
                </div>
                <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                </button>
                <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                </button>
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 点击单独显示图片，手势放大、缩小  结束-->
</block>
<block name="script">
    <script type="text/javascript" src="/Public/Index/js/form.js"></script>
    <script type="text/javascript" src="/Public/Index/js/news.js"></script>
    <script type="text/javascript" src="/Public/static/exif.js"></script>
    <script type="text/javascript">
            $(initDelComment());
    </script>
    <!-- 点击单独显示图片，手势放大、缩小js-->
    <script type="text/javascript">
        window.onload = function () {
            getExif();
        };

        function getExif() {
            var tags = document.getElementsByClassName('image');
            var ispc = $('#ispc').val();

            for (var i = 0; i < tags.length; i++) {
                var id = tags[i].getAttribute('id');
                if (ispc == 1) {
                    var imgs = new Image();
                    imgs.src = $('#' + id).attr("src");
                    var w = $('#' + id).width();
                    var h = $('#' + id).height();
                    if (w > h) {
                        $('#' + id).parent('a').attr("data-size", w + "x" + h);
                    } else {
                        var percent = w / h;
                        var nw = w + 100;
                        var nh = parseInt(nw / percent);
                        $('#' + id).parent('a').attr("data-size", nw + "x" + nh);
                    }
                } else {
                    EXIF.getData(tags[i], function () {
                        var make = EXIF.getTag(this, "Make");
                        var model = EXIF.getTag(this, "Model");
                        var orientation = EXIF.getTag(this, "Orientation");
                        //alert(orientation);
                        var u = navigator.userAgent;
                        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
                        isiOS = isiOS == true ? 1 : 0;

                        var imgs = new Image();
                        imgs.src = $('#' + id).attr("src");
                        var w = $('#' + id).width();
                        var h = $('#' + id).height();
                        if (isiOS == 1 && orientation == 6) {
                            var percent = w / h;
                            var nw = w + 100;
                            var nh = parseInt(nw / percent);
                            $('#' + id).parent('a').attr("data-size", nw + "x" + nh);
                        } else if (isiOS == 0 && orientation == 6) {
                            $('#' + id).css({'transform': 'rotate(90deg)'});
                            $('#' + id).parent('a').attr("data-size", w + "x" + h);
                        }
                    });
                }
            }
        }




        var initPhotoSwipeFromDOM = function (gallerySelector) {

            // 解析来自DOM元素幻灯片数据（URL，标题，大小...）
            // (children of gallerySelector)
            var parseThumbnailElements = function (el) {
                var thumbElements = el.childNodes,
                        numNodes = thumbElements.length,
                        items = [],
                        figureEl,
                        linkEl,
                        size,
                        item;

                for (var i = 0; i < numNodes; i++) {

                    figureEl = thumbElements[i]; // <figure> element

                    // 仅包括元素节点
                    if (figureEl.nodeType !== 1) {
                        continue;
                    }
                    linkEl = figureEl.children[0]; // <a> element

                    size = linkEl.getAttribute('data-size').split('x');

                    // 创建幻灯片对象
                    item = {
                        src: linkEl.getAttribute('href'),
                        w: parseInt(size[0], 10),
                        h: parseInt(size[1], 10)
                    };



                    if (figureEl.children.length > 1) {
                        // <figcaption> content
                        item.title = figureEl.children[1].innerHTML;
                    }

                    if (linkEl.children.length > 0) {
                        // <img> 缩略图节点, 检索缩略图网址
                        item.msrc = linkEl.children[0].getAttribute('src');
                    }

                    item.el = figureEl; // 保存链接元素 for getThumbBoundsFn
                    items.push(item);
                }

                return items;
            };

            // 查找最近的父节点
            var closest = function closest(el, fn) {
                return el && (fn(el) ? el : closest(el.parentNode, fn));
            };

            // 当用户点击缩略图触发
            var onThumbnailsClick = function (e) {
                e = e || window.event;
                e.preventDefault ? e.preventDefault() : e.returnValue = false;

                var eTarget = e.target || e.srcElement;

                // find root element of slide
                var clickedListItem = closest(eTarget, function (el) {
                    return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
                });

                if (!clickedListItem) {
                    return;
                }

                // find index of clicked item by looping through all child nodes
                // alternatively, you may define index via data- attribute
                var clickedGallery = clickedListItem.parentNode,
                        childNodes = clickedListItem.parentNode.childNodes,
                        numChildNodes = childNodes.length,
                        nodeIndex = 0,
                        index;

                for (var i = 0; i < numChildNodes; i++) {
                    if (childNodes[i].nodeType !== 1) {
                        continue;
                    }

                    if (childNodes[i] === clickedListItem) {
                        index = nodeIndex;
                        break;
                    }
                    nodeIndex++;
                }

                if (index >= 0) {
                    // open PhotoSwipe if valid index found
                    openPhotoSwipe(index, clickedGallery);
                }
                return false;
            };

            // parse picture index and gallery index from URL (#&pid=1&gid=2)
            var photoswipeParseHash = function () {
                var hash = window.location.hash.substring(1),
                        params = {};

                if (hash.length < 5) {
                    return params;
                }

                var vars = hash.split('&');
                for (var i = 0; i < vars.length; i++) {
                    if (!vars[i]) {
                        continue;
                    }
                    var pair = vars[i].split('=');
                    if (pair.length < 2) {
                        continue;
                    }
                    params[pair[0]] = pair[1];
                }

                if (params.gid) {
                    params.gid = parseInt(params.gid, 10);
                }

                return params;
            };

            var openPhotoSwipe = function (index, galleryElement, disableAnimation, fromURL) {
                var pswpElement = document.querySelectorAll('.pswp')[0],
                        gallery,
                        options,
                        items;

                items = parseThumbnailElements(galleryElement);

                // 这里可以定义参数
                options = {
                    barsSize: {
                        top: 100,
                        bottom: 100
                    },
                    fullscreenEl: false, // 是否支持全屏按钮
//                    shareButtons: [
//                        {id: 'wechat', label: '分享微信', url: '#'},
//                        {id: 'weibo', label: '新浪微博', url: '#'},
//                        {id: 'download', label: '保存图片', url: '{{raw_image_url}}', download: true}
//                    ], // 分享按钮

                    // define gallery index (for URL)
                    galleryUID: galleryElement.getAttribute('data-pswp-uid'),

                    getThumbBoundsFn: function (index) {
                        // See Options -> getThumbBoundsFn section of documentation for more info
                        var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail
                                pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
                                rect = thumbnail.getBoundingClientRect();

                        return {x: rect.left, y: rect.top + pageYScroll, w: rect.width};
                    }

                };

                // PhotoSwipe opened from URL
                if (fromURL) {
                    if (options.galleryPIDs) {
                        // parse real index when custom PIDs are used 
                        for (var j = 0; j < items.length; j++) {
                            if (items[j].pid == index) {
                                options.index = j;
                                break;
                            }
                        }
                    } else {
                        // in URL indexes start from 1
                        options.index = parseInt(index, 10) - 1;
                    }
                } else {
                    options.index = parseInt(index, 10);
                }

                // exit if index not found
                if (isNaN(options.index)) {
                    return;
                }

                if (disableAnimation) {
                    options.showAnimationDuration = 0;
                }

                // Pass data to PhotoSwipe and initialize it
                gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
                gallery.init();
            };

            // loop through all gallery elements and bind events
            var galleryElements = document.querySelectorAll(gallerySelector);

            for (var i = 0, l = galleryElements.length; i < l; i++) {
                galleryElements[i].setAttribute('data-pswp-uid', i + 1);
                galleryElements[i].onclick = onThumbnailsClick;
            }

            // Parse URL and open gallery if it contains #&pid=3&gid=1
            var hashData = photoswipeParseHash();
            if (hashData.pid && hashData.gid) {
                openPhotoSwipe(hashData.pid, galleryElements[ hashData.gid - 1 ], true, true);
            }
        };

        // execute above function
        initPhotoSwipeFromDOM('.my-gallery');
    </script>
</block>
